<template>
  <div class="box">
    <el-row type="flex">
      <el-button
        type="primary"
        @click="showAddFn"
        plain
        icon="el-icon-folder-opened"
        >新建文件夹</el-button
      >

      <el-button
        @click="getForderDetailFn"
        plain
        :disabled="clickedButton == '' ? true : false"
        >……文件夹信息</el-button
      >
    </el-row>
    <div class="main">
      <div class="folder-list">
        <div
          @click="clickedFn(item)"
          @dblclick="getAllVideoFn(item)"
          :class="[
            'folder',
            clickedButton == item.idStr ? 'folder-selected' : '',
          ]"
          v-for="item in forderList"
          :key="item.idStr"
        >
          <ComImgStack
            :img="item.cover"
            width="100"
            :fit="'contain'"
          ></ComImgStack>
          <p class="f-title">{{ item.name }}</p>
          <p class="f-num">{{ item.videoNum }}个视频</p>
        </div>
      </div>
    </div>
    <Drawer
      @EventDelete="deleteFn"
      @EventSave="getSaveFn"
      ref="Drawer"
      :visible.sync="visible"
    ></Drawer>
    <AddForder
      @EventSave="getSaveFn"
      :dialogVisible.sync="addDialogVisible"
    ></AddForder>
  </div>
</template>

<script>
import {
  getFolderListFolderPhotoApi,
  updateFolderEditApi,
  addFolderAddApi,
  deleteFolderRemoveApi,
} from "@/wss/api/ContentSupervision/photoVido.js";
import Drawer from "./drawer.vue";
import ComImgStack from "../../../components/comImgStack.vue";
import AddForder from "./addForder.vue";

import ComUpdate from "./comUpdate.vue";
export default {
  components: { Drawer, ComImgStack, AddForder, ComUpdate },
  data() {
    return {
      // 添加文件夹
      addDialogVisible: false,

      clickedButton: "",
      visible: false,
      // 被点击的那一项
      clickeditem: {},
      // 查询条件
      queryData: { type: "2" },
      // 文件夹列表
      forderList: [],
    };
  },
  async created() {
    ///

    // 获取文件夹列表
    this.getFolderListFolderPhotoFn();
  },
  methods: {
    // 获取视频id
    getAllVideoFn(row) {
      console.log(row);

      this.$router.push({
        path: "/contentSupervision/video/forderVideo-index",
        query: { id: row.idStr, name: row.path },
      });
    },
    // 删除文件夹
    async deleteFn(data) {
      try {
        let { code, msg } = await deleteFolderRemoveApi(data);
        if (code == 200) {
          this.$modal.msgSuccess(msg);
          this.getFolderListFolderPhotoFn();
          this.visible = false;
        }
      } catch (error) {
        if (error.message == "删除失败该视频文件夹不能被删除") {
          return;
        }
        this.$modal.msg(error);
      }
    },

    // 显示添加对话框
    showAddFn() {
      this.addDialogVisible = true;
    },
    // 按钮被点击
    clickedFn(row) {
      this.clickedButton = row.idStr;

      this.clickeditem = row;
      console.log(this.clickedButton);
    },
    // 修改|添加
    async getSaveFn(data) {
      // 修改
      let myCode, myMsg;
      if (data.idStr) {
        data.id = data.idStr;
        let { msg, code } = await updateFolderEditApi(data);
        myCode = code;
        myMsg = msg;
      } else {
        let { msg, code } = await addFolderAddApi(data);
        myCode = code;
        myMsg = msg;
      }

      if (myCode == 200) {
        this.getFolderListFolderPhotoFn();
        this.addDialogVisible = false;
        this.visible = false;
        this.$modal.msgSuccess(myMsg);
      }
    },
    // 获取文件夹详细
    getForderDetailFn() {
      this.$refs.Drawer.getForderDetailFn(this.clickeditem);
      this.visible = true;
    },
    async getFolderListFolderPhotoFn() {
      let { data, code } = await getFolderListFolderPhotoApi(this.queryData);
      if (code == 200) {
        this.forderList = data;
        console.log(this.forderList);
      }
    },
    addFolderFn() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
  .folder-list {
    display: flex;
    flex-wrap: wrap;
    .folder,
    .folder-selected {
      text-align: center;
      padding: 17px;
      margin: 4px;
      p {
        margin: 0;
      }
      .f-title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0;
      }
      .f-num {
        font-size: 12px;
        color: rgb(158, 158, 158);
      }
    }
    .folder:hover,
    .folder-selected {
      border: 2px solid rgb(253, 150, 53);
      margin: 2px;
    }
  }
}
</style>